import { 
    Map, 
    APILoader, 
    Marker,
    ScaleControl, 
    ToolBarControl, 
    ControlBarControl, 
    Geolocation 
} from '@uiw/react-amap';
import { Button, message } from 'antd';
import React from 'react';
  

export class MyMap extends React.Component {
  constructor(props) {
    super(props)
    // 父组件可以传递的属性
    // marker_position 有lon、lat属性
    // marker_visiable
    // http_line_path [[lon,lat], ... ]
    
    // 接收props
    // 1 标记点位置
    const marker_position = this.props.marker_position || {
        lon: 114.35738432483673,
        lat: 30.608313392810004,
    }
    // 2 标记点是否可见
    const marker_visiable = this.props.marker_visiable || false
    // 3 http轨迹回放轨迹点接收
    const http_line_path = this.props.http_line_path
    // 下行代码在构造函数中只能运行一次
    this.state = { marker_position,marker_visiable,http_line_path,
        guijihuifang : false
    }

    // 属性设置
    // 地图中心
    this.center = [114.35738432483673, 30.608313392810004]
    // zoom
    this.zoom = 18
    

  }

  marker_component = (AMap, map, position, visiable)=>{
    // 在这里调用高德地图原生API
    const marker = new AMap.Marker({
        position: new AMap.LngLat(
            position.lon, 
            position.lat
        ),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        visible: visiable,
    });
    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
  }

  // http划线
  http_line_path_draw = (AMap, map, flag)=>{
      if(flag){
        message.info('2秒之后显示轨迹回放')
        setTimeout(function(){ 
            
        AMap.plugin('AMap.MoveAnimation', function(){
            const linePath = [
                [114.35598764152527,30.608783803720062],
                [114.3567654821396,30.608917695507408],
                [114.35696933002473,30.608243617735297],
                [114.3571409914016,30.607246343385818],
                [114.35807440013886,30.60737562026995],
            ]
            const passedPolyline = new AMap.Polyline({
                map: map,
                path: [],
                strokeColor: 'red',
                strokeWeight: 6,
            })
            const path_marker = new AMap.Marker({
                map: map,
                position: [114.35598764152527, 30.608783803720062],
                autoRotation: true
            });
            map.add(path_marker);
            path_marker.on('moving', function(e){
                passedPolyline.setPath(e.passedPath);
            });
            path_marker.moveAlong(linePath, {
                // 每一段的时长
                duration: 1000,//可根据实际采集时间间隔设置
                // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                autoRotation: true,
            });
        }) }, 2000);
      }
      
  }

  // websocket划线

  btn_click = ()=>{
      this.setState({guijihuifang: !this.state.guijihuifang})
    //   this.guijihuifang = !this.guijihuifang
      console.log(this.state.guijihuifang)
  }

  render(){
    const Demo = () => (
        <div>
        <Button onClick={this.btn_click}>轨迹回放</Button>
      <div style={{ width: '1000px', height: '600px' }}>
        
        <Map
            center={ [114.35738432483673, 30.608313392810004]} zoom={18}
        >
            {({ AMap, map, container }) => {
                this.marker_component(AMap, map, 
                    this.state.marker_position, this.state.marker_visiable)
                // const linePath = this.state.http_line_path
                this.http_line_path_draw(AMap, map, this.state.guijihuifang)
                return;
            }}
        </Map>
      </div>
      </div>
    );

    return( 
      <APILoader akay="c36700228ab854ce91c7226f41427904">
        <Demo></Demo>
      </APILoader>
    )
  }
}